<template>
  <div class="inventory-table">
    <div class="header">
      <Select :options='list1' @change-value="changeValue1"/>
      <Select :options='list2' @change-value="changeValue2"/>
      <Select :options='list3' @change-value="changeValue3"/>
    </div>
    <div class="table">
      <div class="table-header">
        <div style="width: 2%;"></div>
        <div style="width: 4%;">序号</div>
        <div style="width: 7%;">物料类别</div>
        <div style="width: 14%;">物料名称</div>
        <div style="width: 10%;">物料编号</div>
        <div style="width: 9%;">安全库存</div>
        <div style="width: 9%;">库存数量</div>
        <div style="width: 12%;">库存数量对比</div>
        <div style="width: 9%;">在途数量</div>
        <div style="width: 9%;">下月需求数量</div>
        <div style="width: 8%;">物料采购周期(天)</div>
        <div style="width: 7%;">建议补充数量</div>
      </div>
      <div class="table-body">
        <div class="line" v-for="item in dataSource">
          <div class="line1">
            <div style="width: 2%;"></div>
            <div style="width: 4%;">{{ item.num }}</div>
            <div style="width: 7%;">{{ item.type }}</div>
            <div style="width: 14%;">{{ item.type }}</div>
            <div style="width: 10%;">{{ item.type }}</div>
            <div style="width: 9%;">{{ item.type }}</div>
            <div style="width: 9%;">{{ item.type }}</div>
            <div style="width: 12%;">{{ item.type }}</div>
            <div style="width: 9%;">{{ item.type }}</div>
            <div style="width: 9%;">{{ item.type }}</div>
            <div style="width: 8%;">{{ item.day }}</div>
            <div style="width: 7%;">{{ item.type }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import axios from "axios"
import {ConfigProvider} from "ant-design-vue"
import {onMounted, ref, onBeforeUnmount} from "vue"
import Select from "./select.vue"

const list = ref([])

const list1 = ['list1', 'list1-1']
const list2 = ['list2']
const list3 = ['list3']

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')

const changeValue1 = v => {
  value1.value = v;
}

const changeValue2 = v => {
  value2.value = v;
}

const changeValue3 = v => {
  value3.value = v;
}



const props = defineProps({})

const dataSource = ref([
  {
    num: '01',
    type: '01',
    name: '01',
    code: 'cl-01',
    num1: '100',
    num2: '100',
    num3: '222',
    num4: '333',
    num5: '23',
    day: '22',
  },
  {
    num: '01',
    type: '01',
    name: '01',
    code: 'cl-01',
    num1: '100',
    num2: '100',
    num3: '222',
    num4: '333',
    num5: '23',
    day: '22',
  },
])

const getData = () => {
  axios({
    url: 'https://xly.shclkj.com/hufu/api/v1/restData/home/warehouse/name/deliver?apiToken=7286775b9c0f4d478be5e7ebee5653ad',
    method: 'get'
  }).then(({data}) => {
    if (data.status === 200) {
      list.value = data.data;
      console.log(data.data)
    }
  }).catch(e => {
    console.log(e);
  })
}

onMounted(() => {
  getData()
})

onBeforeUnmount(() => {

})

</script>

<style lang="less" scoped>
.inventory-table {
  width: 4270px;
  height: 2230px;
  font-size: 32px;
  color: #fff;
  padding: 0 40px;

  .header {
    display: flex;
    justify-content: flex-end;
    gap: 60px;
    width: 100%;

    .select {
      cursor: pointer;
      width: 388px;
      height: 60px;
      line-height: 60px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.04);
      box-sizing: border-box;
      border: 1px solid #9EB9D4;
      display: flex;
      position: relative;
      .text {
        flex: 1;
        text-indent: 20px;
      }
      .icon {
        width: 60px;
        img {
          width: 20px;
        }
      }
      .options-list {
        position: absolute;
        left: 0;
        top: 61px;
        width: 100%;
        border: 1px solid #9EB9D4;
        .option {
          text-indent: 20px;
          &:hover {
            background: rgba(255,255,255,.2);
          }
        }
      }
    }
  }
  > .table {
    width: 100%;
    min-height: 1000px;
    margin-top: 40px;
    border: 1px solid #9BADD1;
    .table-header {
      height: 60px;
      line-height: 60px;
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #9BADD1;
      > div {
        padding-left: 20px;
        border-right: 1px solid #9BADD1;
      }
    }
    .table-body {
      width: 100%;
      .line {
        min-height: 80px;
        width: 100%;
      }
      .line1 {
        width: 100%;
        height: 80px;
        line-height: 80px;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #9BADD1;
        > div {
          padding-left: 20px;
          border-right: 1px solid #9BADD1;
        }
      }
    }
  }
}

</style>
